<template>
  <view style="display: flex; flex-direction: column; position: relative; align-items: center;">
    <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
      <image class="avatar" :src="headUrl || defaultHeadUrl"></image>
    </button> 
    <u-cell-group>
      <u-cell title="昵称" :titleStyle="titleStyle">
        <template v-slot:value>
          <input v-model="nickName" type="nickname" class="inputWrap" placeholder="请输入昵称" placeholder-style="font-size: 30rpx"/>
        </template>
      </u-cell>
      <!-- <u-cell :titleStyle="titleStyle" v-for="item, index in addrList">
        <template v-slot:title>
          <div :style="titleStyle" style="display: flex; flex-direction: row; align-items: center;">
            <view @click="addAddrLength" style="margin-left: 16rpx">
              <u-icon name="plus-circle" color="#79C435" :size="36"></u-icon>
            </view>
            <view v-if="addrList.length !== 1" @click="() => deleteAddrLength(index)" style="margin-left: 16rpx">
              <u-icon name="minus-circle" color="#79C435" :size="36"></u-icon>
            </view>
          </div>
        </template>
        <template v-slot:value>
          <input :value="item" @input="(event) => changeAddr(event, index)" class="inputWrap" placeholder="请输入地址"	placeholder-style="font-size: 30rpx"/>
        </template>
      </u-cell> -->
      <!-- <u-cell title="地址" :titleStyle="titleStyle">
       <template v-slot:value>
          <input v-model="addr" class="inputWrap" placeholder="请输入地址"	placeholder-style="font-size: 30rpx"/>
        </template>
      </u-cell> -->
	  </u-cell-group>
    <u-button @click="register" :loading="loading" text="提交" :customStyle="customStyle" :hairline="false"></u-button>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { uploadImg } from '@/services/uploadFile';
import { editUser } from '@/services/user';
import { store } from '@/store';
import { defaultAvatarUrl, getUserInfo, provinceList } from '@/utils/common';

export default {
  data() {
    return {
      headUrl: '',
      defaultHeadUrl: defaultAvatarUrl,
      nickName: '',
      // addr: '',
      // addrList: [''],
      titleStyle: {
        width: '210rpx',
        fontSize: '30rpx',
      },
      customStyle: {
        margin: '100rpx 30rpx',
        backgroundColor: '#79C435',
        color: '#fff',
        width: 'calc(100vw - 60rpx)'
      },
      loading: false,
    }
  },
  methods: {
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail 
      this.headUrl = avatarUrl;
    },
    // changeAddr(event, index) {
    //   const { value = "" } = event?.detail || {};
    //   const { addrList } = this;
    //   addrList.splice(index, 1, value);
    //   this.addrList = addrList;
    // },
    // addAddrLength() {
    //   const { addrList } = this;
    //   addrList.push('');
    //   this.addrList = addrList;
    // },
    // deleteAddrLength(index) {
    //   const { addrList } = this;
    //   addrList.splice(index, 1);
    //   this.addrList = addrList;
    // },
    // regAddr() {
    //   const { addrList } = this;
    //   let regResult = false;
    //   addrList.forEach((addrItem) => {
    //     if (!provinceList.some(item => addrItem.includes(item))) {
    //       regResult = true
    //     }
    //   })
    //   return regResult;
    // },
    async register() {
      const _that = this;
      const { headUrl, nickName } = this;
      if (!headUrl) {
        this.$refs.uToast.show({
          message: "请添加头像",
        })
      } else if (!nickName) {
        this.$refs.uToast.show({
          message: "请输入昵称",
        })
      } else {
        // const addr = Array.from(new Set(addrList)).join(',');
        this.loading = true;
        wx.showLoading({
          title: '加载中',
          mask: true,
        })
        try {
          const result = await uploadImg({
            imageUrl: headUrl,
            token: _that.$store.state.token,
          })
          console.log('result', result)
          const res = await editUser({
            nickName,
            headUrl: result,
            // addr,
          })
          if (res.success) {
            await getUserInfo(store);
            wx.hideLoading();
            this.loading = false;
            _that.$refs.uToast.show({
              message: "注册成功",
              complete() {
                uni.switchTab({
                  url: '/pages/my/index'
                })
              }
            })
          } else {
            throw new Error('注册失败，请重试')
          }
        } catch(e) {
          wx.hideLoading();
          this.loading = false;
          _that.$refs.uToast.show({
            message: "注册失败，请重试",
          })
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.avatar {
  display: block;
  width: 56px;
  height: 56px;
}

.container {
  display: flex;
}

.inputWrap {
  width: 100%;
  font-size: 30rpx;
}

</style>
